<template>
  <div style="padding: 20px;">
    <div class="top" style="padding:10px; display: flex; border: 1px solid #e6e6e6">
      <div class="left" style="">
        <table>
          <tr>
            <td>订单编号</td>
            <td>{{order.id}}</td>
          </tr>

          <tr>
            <td>用户</td>
            <td>{{order.userName}}</td>
          </tr>

          <tr>
            <td>订单状态</td>
            <td>
              <el-tag :type="order.status | statusStyle">
                {{ order.status | statusFilter }}
              </el-tag>
            </td>
          </tr>

          <tr>
            <td>支付方式</td>
            <td>微信支付</td>
          </tr>

          <tr>
            <td>支付流水号</td>
            <td>SN123456789k0</td>
          </tr>

        </table>

      </div>
      <div class="right" style="margin-left: 40px">
        <table>
          <tr>
            <td>收货人</td>
            <td>{{order.recipientName}}</td>
          </tr>

          <tr>
            <td>联系电话</td>
            <td>{{order.phoneNum}}</td>
          </tr>

          <tr>
            <td>收货地址</td>
            <td>{{order.addressDetail}}</td>
          </tr>

          <tr>
            <td>快递公司</td>
            <td>
              <div v-if="order.expressName==null">无</div>
              <div v-else>{{order.expressName}}</div>
            </td>
          </tr>

          <tr>
            <td>快递单号</td>
            <td>
              <div v-if="order.expressNumber==null">无</div>
              <div v-else>{{order.expressNumber}}</div>
            </td>
          </tr>

        </table>
      </div>
    </div>

    <el-steps :active="step" finish-status="success" align-center style="margin-bottom: 50px;margin-top: 50px">
<!--      <el-step title="生成订单" :description="order.createTime | parseTime('{y}-{m}-{d} {h}:{i}')"></el-step>-->
<!--      <el-step title="用户支付"-->
<!--               :description="order.payTime==='1900-01-01T00:00:00'?'':(order.payTime | parseTime('{y}-{m}-{d} {h}:{i}'))"></el-step>-->
<!--      <el-step title="商家发货"-->
<!--               :description="order.expressTime==='1900-01-01T00:00:00'?'':(order.expressTime | parseTime('{y}-{m}-{d} {h}:{i}'))"></el-step>-->
<!--      <el-step title="确认收货"-->
<!--               :description="order.confirmTime==='1900-01-01T00:00:00'?'':(order.confirmTime | parseTime('{y}-{m}-{d} {h}:{i}'))"></el-step>-->
<!--      <el-step title="用户评价"-->
<!--               :description="order.commentTime==='1900-01-01T00:00:00'?'':(order.commentTime | parseTime('{y}-{m}-{d} {h}:{i}'))"></el-step>-->



      <el-step title="生成订单" :description="order.createTime"></el-step>
      <el-step title="用户支付"
               :description="order.payTime"></el-step>
      <el-step title="商家发货"
               :description="order.expressTime"></el-step>
      <el-step title="确认收货"
               :description="order.confirmTime"></el-step>
      <el-step title="用户评价"
               :description="order.commentTime"></el-step>
    </el-steps>


    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="orderItemList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品名" prop="id" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>

      <el-table-column label="分类id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.categoryId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.imgUrl" width="100px" height="100px">
        </template>
      </el-table-column>
      <el-table-column label="总价" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.totalPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.specDesc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="数量" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.buyCount }}</span>
        </template>
      </el-table-column>

    </el-table>

    <div style="display: flex;justify-content: flex-end">
      <table>
        <tr>
          <td>商品总价</td>
          <td>{{order.totalPrice}}</td>
        </tr>

        <tr>
          <td>数量</td>
          <td>{{order.buyCount}}</td>
        </tr>

        <tr>
          <td>运费</td>
          <td>{{order.expressPrice}}</td>
        </tr>

        <tr>
          <td>优惠金额</td>
          <td>{{order.couponOffPrice}}</td>
        </tr>

        <tr>
          <td>实付</td>
          <td>{{order.actualPrice}}</td>
        </tr>

      </table>
    </div>


    <div style="display: flex;justify-content: center">
      <el-button v-if="order.status===2" type="success" @click="dialogFormVisible = true">发货</el-button>
      <el-button @click="goBack">返回</el-button>
    </div>

    <el-dialog title="发货" :visible.sync="dialogFormVisible">

      <el-form label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="快递方式" prop="expressType">
          <el-select v-model="expressType" placeholder="快递选择" clearable style="width: 150px" class="filter-item">
            <el-option v-for="(value, key) in expressMap" :key="key" :label="value" :value="key"/>
          </el-select>
        </el-form-item>

        <el-form-item label="快递单号" prop="expressNumber">
          <el-input v-model="expressNumber" />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="success" @click="confirmDelivery()">
          确认发货
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import Sticky from '@/components/Sticky' // 粘性header组件
  import {getOrderById, confirmDelivery} from '@/api/order'


  export default {
    name: 'OrderDetail',
    components: {Tinymce, Sticky},
    filters: {
      statusStyle(status) {
        const statusStyleMap = {
          '1': 'warning',
          '2': 'danger',
          '3': '',
          '4': 'success',
          '5': 'success',
          '6': 'info'
        }
        return statusStyleMap[status]
      },
      statusFilter(status) {
        const statusMap = {'1': '待付款', '2': '待发货', '3': '已发货', '4': '待评价', '5': '已完成', '6': '已取消'}
        return statusMap[status]
      }
    },
    data() {
      return {
        dialogFormVisible:false,
        expressType:null,
        expressNumber:null,
        expressMap: {'1': '中通快递', '2': '申通快递', '3': '圆通快递','0': '无需快递'},
        step: 0,
        tableKey: 0,
        listLoading: false,
        orderId: null,
        order: {},
        orderItemList: null
      }
    },
    computed: {},
    created() {
      const id = this.$route.params && this.$route.params.id
      this.orderId = id;
      this.fetchData(id)

      // Why need to make a copy of this.$route here?
      // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
      // https://github.com/PanJiaChen/vue-element-admin/issues/1221
      this.tempRoute = Object.assign({}, this.$route)
    },
    methods: {
      fetchData(id) {
        getOrderById(id).then(r1 => {
          this.order = r1.data
          this.orderItemList = r1.data.orderItemList
          console.log("订单：", this.order)
          //设置进度条
          if (r1.data.status < 5) {
            this.step = r1.data.status
          }

          //设置tag标签和title
          // this.setTagsViewTitle()
          // this.setPageTitle()
        }).catch(err => {
          console.log(err)
        })
      },

      /**
       * 确认发货
       */
      confirmDelivery(){
        let params = {
          expressType : this.expressType,
          orderId: this.orderId,
          expressNumber: this.expressNumber
        }
        confirmDelivery(params).then(r1=>{
          this.dialogFormVisible = false
          this.fetchData(this.orderId)
          this.$notify({
            title: '成功',
            message: '确认发货成功',
            type: 'success',
            duration: 2000
          })
        })
      },


      //关闭标签并返回列表页
      goBack() {
        this.$store.dispatch('tagsView/delView', this.$route).then(() => {
          this.$nextTick(() => {
            this.$router.replace({
              path: '/order/list'
            })
          })
        })
      }


    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";

  td {
    height: 30px;

  }

  tr td:first-child {
    text-align: right
  }

  tr td:nth-child(2) {
    padding-left: 20px
  }
</style>

